<template>
  <NavBar />
  <div class="category-nav">
    <div class="category">
      <ul>
        <li v-for="(item, index) in category" :key="index" :class="{ active: activeIndex === index }"
          @click="handleClick(item.id, index)">
          {{ item.title }}
        </li>
      </ul>
    </div>
    <div class="end">
      <ul>
        <li v-for="(item, index) in end" :key="index" :class="{ active: activeEndIndex === index }"
          @click="handleEndClick(item.id, index)">
          {{ item.title }}
        </li>
      </ul>
    </div>
    <div class="sort">
      <ul>
        <li v-for="(item, index) in sort" :key="index" :class="{ active: activeSortIndex === index }"
          @click="handleSortClick(item.id, index)">
          {{ item.title }}
        </li>
      </ul>
    </div>
  </div>


  <van-list class="result-list" v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
    <ul class="list">
      <li v-for="item in list" :key="item.id" @click="handleItemClick(item.id)">
        <img :src="getProxyImageUrl(item.pic)" :alt="item.title" class="h-img" />
        <p class="title line-ellipsis">{{ item.title }}</p>
        <p class="tag line-ellipsis">{{ item.tag }}</p>
      </li>
    </ul>
  </van-list>
  <tab-bar />
</template>



<script setup>
import { getProxyImageUrl } from "@/util/index.js"
import TabBar from "@/components/common/TabBar.vue"

import { getAllCategories, getCategoryComics } from "@/api/index.js"
import { ref, computed, onMounted, watch } from 'vue'

import { useRouter } from 'vue-router'
const router = useRouter()

const category = ref([])

const end = ref([])

const sort = ref([])

// 当前激活的索引
const activeIndex = ref(0);
const activeEndIndex = ref(0);
const activeSortIndex = ref(0);

// 当前激活的分类ID
const activeCategoryId = computed(() => {
  return category.value[activeIndex.value] ? category.value[activeIndex.value].id : 1;
});

const activeEndId = computed(() => {
  return end.value[activeEndIndex.value] ? end.value[activeEndIndex.value].id : 0;
});

const activeSortId = computed(() => {
  return sort.value[activeSortIndex.value] ? sort.value[activeSortIndex.value].id : 0;
});

const pageNum = ref(1)

const pageSize = ref(21)

const handleItemClick = (id) => {
  router.push({ path: `/comicCover/${id}` })
}

// 点击事件处理函数
const handleClick = (id, index) => {
  activeIndex.value = index;
};
const handleEndClick = (id, index) => {
  activeEndIndex.value = index;
};
const handleSortClick = (id, index) => {
  activeSortIndex.value = index;
};



const loading = ref(false)
const finished = ref(false)

const list = ref([])


onMounted(async () => {
  //加载分类类型
  const response = await getAllCategories()
  category.value = response.data.category

  // console.log("category", category.value);


  end.value = response.data.end
  sort.value = response.data.sort

  pageNum.value = 1;

  //加载默认分类数据
  const res = await getCategoryComics(activeCategoryId.value, activeEndId.value, 0, activeSortId.value, pageNum.value, pageSize.value)
  list.value.push(...res.data)
  // console.log("res", res);
});


const onLoad = async () => {

  // console.log("加载更多");


  pageNum.value += 1;
  const res = await getCategoryComics(activeCategoryId.value, activeEndId.value, 0, activeSortId.value, pageNum.value, pageSize.value)

  if (res.data.length === 0) {
    loading.value = false
    finished.value = true
    // console.log("没有更多了");

    return
  } else if (res.data.length > 0) {
    list.value.push(...res.data)
    loading.value = false
  }
};

watch(activeIndex, async () => {
  pageNum.value = 1
  list.value = []
  loading.value = true
  finished.value = false
  const res = await getCategoryComics(activeCategoryId.value, activeEndIndex.value, 0, activeSortId.value, pageNum.value, pageSize.value)
  list.value.push(...res.data)
  loading.value = false
})

watch(activeEndIndex, async () => {
  pageNum.value = 1
  list.value = []
  loading.value = true
  finished.value = false
  const res = await getCategoryComics(activeCategoryId.value, activeEndIndex.value, 0, activeSortId.value, pageNum.value, pageSize.value)
  list.value.push(...res.data)
  loading.value = false
})

watch(activeSortIndex, async () => {
  pageNum.value = 1
  list.value = []
  loading.value = true
  finished.value = false
  const res = await getCategoryComics(activeCategoryId.value, activeEndIndex.value, 0, activeSortId.value, pageNum.value, pageSize.value)
  list.value.push(...res.data)
  loading.value = false
});

</script>













<style scoped>
.category-nav {
  margin-top: 60px;
  padding: 10px;
  font-size: 14px;
}

.category {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.category ul,
.end ul,
.sort ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 5px;
  align-items: center;
  justify-content: flex-start;
}


.end {
  margin: 15px 0;
}

.category li,
.end li,
.sort li {
  flex: 0 0 calc((100% - (7 - 1) * 5px) / 7);
  /* 每个 li 占据 1/7 的宽度 */
  box-sizing: border-box;
  /* 确保 padding 和 border 不会影响宽度计算 */
  text-align: center;
  /* 文本居中对齐 */
  /* padding: 10px; */
  /* 固定内边距 */
  min-height: 35px;
  /* 统一最小高度 */
  display: flex;
  /* 使用 Flexbox 布局 */
  align-items: center;
  /* 内容垂直居中 */
  justify-content: center;
  /* 内容水平居中 */
}

/* 激活状态的样式 */
.active {
  background-color: red;
  /* 背景变红 */
  color: white;
  /* 文字变白 */
  border-color: red;
  border-radius: 4px;
  border: 0.5px solid red;
  /* 边框颜色同步变化 */
}

.line-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.list {
  list-style: none;
  padding: 10px;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.list li {
  flex: 0 0 calc((100% - (3 - 1) * 10px) / 3);
  box-sizing: border-box;
  /* 确保 padding 和 border 不会影响宽度计算 */
  text-align: center;
  background-color: #fff;
  padding: 0px;

}

.h-img {
  border-radius: 5px;
  object-fit: cover;
  ;
  /* 裁剪图片以填充容器 */
  width: 100%;
  /* 图片宽度占满父容器 */
  height: 150px;
  /* 保持图片的宽高比例 */
  display: block;
  /* 去除图片底部的默认空白间隙 */
}


.title {

  text-align: left;
  font-size: 15px;
  color: #666;
  margin: 5px 0 5px 0;
  padding: 0;

}


.tag {
  text-align: left;
  font-size: 12px;
  color: #999;
  margin: 0;
  padding: 0;
}
</style>
